import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions/address'
import utils from '../../utils'
import Container from '../../components/Container'
import Header from '../../components/Header'
import MeScrollContainer from '../../components/MeScroll'
import { Picker, List, WhiteSpace,Switch } from 'antd-mobile';
class AddressEdit extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      recv_name:'',
      recv_address:"",
      recv_area:'',
      recv_city:'',
      recv_province:'',
      recv_country_id:'',
      recv_city_id :'',   
      recv_province_id:'',
      post_code:'',
      country:'',
      recv_mobile:"",
      is_default:false,
      countryList:[],
      regionList:[],
      cityList:[]

    }
  }

  componentWillMount(){

  }

  componentDidMount(){
    let { actions ,params} =this.props 
    if(params.id>0){
      actions.getAddressInfo({addr_id:params.id},{ callback:(res)=>{
        let data=res.data
        data.recv_country_id=[data.recv_country_id]
        data.recv_city_id=[data.recv_city_id]
        data.recv_province_id=[data.recv_province_id]
        this.setState({
          ...data
        })
      }})
    }
    actions.getCountry({},{ callback:(res)=>{
      let Country=res.map(item =>{
        let a={
          label:item.country_name,
          value:item.country_id
        }
        return a
      })
      this.setState({
        countryList:Country
      })
    }})
    
  }
  onTextChange(type,e){
    this.setState({
      [type]:e.target.value
    })
  }
  submit(){
    let {actions,params} =this.props
    let {countryList,regionList,cityList} =this.state
    let validateList=[
    {
      text:'Please enter the full name',
      type:'empty',
      data:this.state.recv_name
    },
    {
      text:'Please enter the address',
      type:'empty',
      data:this.state.recv_address
    },
    {
      text:'Please enter the country',
      type:'empty',
      data:this.state.recv_country
    },
    {
      text:'Please enter the phone',
      type:'empty',
      data:this.state.recv_mobile
    },
    ]
    if(!utils.validate(validateList))
      return
    let data={
      recv_name:this.state.recv_name,
      recv_address:this.state.recv_address, 
      recv_mobile:this.state.recv_mobile,
      post_code:this.state.post_code,
      recv_area:this.state.recv_area,
      recv_country_id:this.state.recv_country_id[0],
      recv_province_id:this.state.recv_province_id[0],
      recv_city_id:this.state.recv_city_id[0],
      recv_country:countryList.find(item => item.value == this.state.recv_country_id[0]).label,
      recv_province:regionList.find(item => item.value == this.state.recv_province_id[0]).label,
      recv_city:cityList.find(item => item.value == this.state.recv_city_id[0]).label,
    }
    if(params.id > 0){
      data.addr_id=this.state.addr_id
      actions.updateAddress(data,{callback:(res) =>{
        this.context.router.history.goBack()
      }})
    }else{
      actions.addAddress(data,{callback:(res) =>{
        this.context.router.history.goBack()
      }})
    }
    
  }
  changeCountry(value){
    let {actions} =this.props
    this.setState({
      recv_country_id:value
    })
    actions.getRegion({country_id:value[0]},{ callback:(res)=>{
      let data=res.map(item =>{
        let a={
          label:item.region_name,
          value:item.region_id
        }
        return a
      })
      this.setState({
        regionList:data,
        recv_province_id:[],
        recv_city_id:[]
      })
    }})

  }
  changeRegion(value){
    let {actions} =this.props
    this.setState({
      recv_province_id:value
    })
    actions.getCity({region_id:value[0]},{ callback:(res)=>{
      let data=res.map(item =>{
        let a={
          label:item.city_name,
          value:item.city_id
        }
        return a
      })
      this.setState({
        cityList:data,
        recv_city_id:[]
      })
    }})

  }
  changeCity(value){
    this.setState({
      recv_city_id:value
    })
    

  }

  render(){
    let {is_default,recv_name,recv_address,recv_area,
      recv_province_id,post_code,recv_country_id,
      recv_city_id,recv_mobile,countryList,regionList,cityList} =this.state
    return(
        <div >
        <Header title={'Address Edit'} leftBtn={true} leftBtnTouch={()=>{
          this.context.router.history.goBack()
        }}/>
        <MeScrollContainer prefixcls='common-container'>
         <div className='address-container '>
            <div className='input-item'>
              <span className='s1'>Full Name:</span>
              <input value={recv_name} onChange={this.onTextChange.bind(this,'recv_name')} type="text" className='s2' />
            </div>
            <Picker extra="please choose" okText='ok' dismissText='cancle' data={countryList} cols={1} value={recv_country_id}  onOk={v => this.changeCountry(v)}   className="forss">
                <List.Item arrow="horizontal">Country</List.Item>
            </Picker>
            <Picker extra="please choose" okText='ok' dismissText='cancle' data={regionList} cols={1} value={recv_province_id}  onOk={v => this.changeRegion(v)}    className="forss">
                <List.Item arrow="horizontal">State/Province/Region:</List.Item>
            </Picker>
            <Picker extra="please choose" okText='ok' dismissText='cancle' data={cityList} cols={1} value={recv_city_id}   onOk={v => this.changeCity(v)}   className="forss">
                <List.Item arrow="horizontal">City:</List.Item>
            </Picker>
            <div className='input-item'>
              <span className='s1'>Area:</span>
              <input value={recv_area} onChange={this.onTextChange.bind(this,'recv_area')} type="text" className='s2' />
            </div>
            <div className='input-item' style={{height:'auto'}}>
              <span className='s1'>Address:</span>
              <textarea value={recv_address} onChange={this.onTextChange.bind(this,'recv_address')} rows="3"  className='s2' />
            </div>
            <div className='input-item'>
              <span className='s1'>Zip:</span>
              <input value={post_code} onChange={this.onTextChange.bind(this,'post_code')} type="text" className='s2' />
            </div>
           
            <div className='input-item'>
              <span className='s1'>Phone number:</span>
              <input value={recv_mobile} onChange={this.onTextChange.bind(this,'recv_mobile')} type="text" className='s2' />
            </div>
            <div className='input-item'>
              <span className='s1'>Default address:</span>
              <Switch checked={is_default==1?true:false} className='s2' onClick={(checked) => { this.setState({is_default:checked?1:0}) }}/>
            </div>
         </div>
         </MeScrollContainer>
         <div className="bottom big-btn" onClick={this.submit.bind(this)}>
            Save
         </div>
        </div>
    )
  }
 
}
function mapStateToProps(state){
  return{ 
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AddressEdit)


